<template>
	<view class="my-detail" v-if="loading" :style="{background: releaseType === 'news' ? '#fffcf5' : ''}">
		

		<!-- 商品货物 基本信息 卡片 -->
		<Goods :item="detailData" :type="type" v-if="releaseType === 'goods'"></Goods>


		<!--  多文字详情内容  多详情图片  上传视频    布局放在详细信息 卡片 底下 -->
		<Info :detailData="detailData" :type="type"></Info>

		<!--  ('招标比价') ('参与竞标')      即时沟通等 按钮 -->
		<button-group v-if="releaseType !== 'resource' && releaseType !== 'news'" :type="type"
			 :release-id="detailData.id" :release-type="releaseType" :status="status">
		</button-group>
		
	</view>
</template>

<script>
	import Avatar from "@/components/detail/Avatar.vue"
	import AvatarNews from "./com/AvatarNews.vue"
	import myTitle from "@/components/myTitle.vue";
	import showDetail from "@/components/showDetail.vue";
	import buttonGroup from "../components/buttonGroup.vue";
	import Goods from './com/Goods.vue'
	import Transport from './com/Transport.vue'
	import Crossborder from './com/Crossborder.vue'
	import Info from './com/Info.vue'
	import Title from '@/components/detail/Title.vue'
	import {
		IMAGE_URL
	} from '@/config/app'


	export default {
		data() {
			return {
				IMAGE_URL,
				loading: false,
				lang: getApp().globalData.lang,
				pictureDisplay: [],
				detailData: {},
				id: 0, // 商品id
				type: 1, // 1=推广，2=竞标
				releaseType: '',
				status: ''
			};
		},
		components: {
			showDetail,
			buttonGroup,
			myTitle,
			Avatar,
			AvatarNews,
			Goods,
			Transport,
			Crossborder,
			Info,
			Title
		},
		onLoad(option) {
			console.log(option);
			
			this.releaseType = option.releaseType
			this.id = parseInt(option.id)
			this.type = parseInt(option.type)
			// this.status = option.status
			this.lang = this.$i18n.locale
			  
			this.getDetail()
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("详情页")
			})
		},
		methods: {

			downLoadFile(url) {
				const that = this
				uni.showLoading({
					title:"download...",
					mask:true
				})
				console.log('下载链接', this.IMAGE_URL + url)
				var downloadTask = uni.downloadFile({
					url: that.IMAGE_URL + url,
					success(res) {
						uni.hideLoading()
						console.log('tempFilePath', res.tempFilePath)
						const tempFilePath = res.tempFilePath
						uni.openDocument({
							filePath: tempFilePath,
							showMenu: true,
							success: function(file) {
								console.log('file-success', file);
							}
						});
					},
				})
				downloadTask.onProgressUpdate(({progress,totalBytesWritten,totalBytesExpectedToWrite}) => {
					if(progress === 100){
						downloadTask.offProgressUpdate();
					}
				})
			},

			getDetail() {
				console.log('releaseType:',this.releaseType)
				switch (this.releaseType) {
					case 'goods':
						this.$u.api.user.getGoodsDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
							// 使用 findIndex 方法查找 url 为指定值的对象的下标
							const targetUrl = "https://gluz-oss.oss-cn-beijing.aliyuncs.com";
							const index = this.detailData.buy_files.findIndex(item => item.url === targetUrl);
							this.detailData.buy_files.splice(index,1)
							console.log('buy_files:',this.detailData.buy_files);
							this.loading = true
						})
						break;
					case 'transport':
						this.$u.api.collection.getTransportDetailDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
							this.loading = true
						})
						break;
					case 'crossborder':
						this.$u.api.collection.getCrossborderListDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
							this.detailData.content = res.desc
							this.detailData.content_ru = res.desc_ru
							
							this.detailData.buy_images = res.images
							this.detailData.buy_videos = res.videos
							this.detailData.buy_files = res.files

							this.loading = true
						})
						break;
					case 'professional':
						this.$u.api.collection.getProfessionalListDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
							
							this.detailData.content = res.con
							this.detailData.content_ru = res.con_ru
							
							
							this.loading = true
						})
						break;
					case 'resource':
						this.$u.api.collection.getLibraryDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
							this.detailData.content = res.profile
							this.detailData.content_ru = res.profile_ru
							this.loading = true
						})
						break;
					case 'lifead':
						this.$u.api.collection.getLifeadListDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
							this.loading = true
						})
						break;
					case 'news':
						this.$u.api.collection.getNewsListDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
							this.loading = true
						})
						break;
					case 'exposure':
						this.$u.api.collection.getExposureListDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
							this.loading = true
						})
						break;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.my-detail {
		background-color: #ffffff;
		padding-bottom: 160rpx;

		.cardBox {
			width: 90%;
			margin: 0 auto;
			box-shadow: 0 0 10px #ddd;
			background: #ddd;
			padding: 10rpx 20rpx;
			border-radius: 20rpx;
			background: #fff;
			margin-bottom: 20rpx;
			position: relative;
			&.yellow{
				background: #fefcf6;
			}

		}

		.newTitle {
			width: 90%;
			margin: 0 auto;
			font-weight: 600;
			padding-top: 40rpx;
			.icon{
				margin-left: 10rpx;
				transform: rotate(-90deg);
				font-weight: normal;
			}
		}
	}
</style>